<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Time-N-Gears 0.1</title>
<script src="gears_init.js"></script>
<script>
if (!window.google || !google.gears) {
    location.href = "http://gears.google.com/?action=install&message=To run the timesheet please install Google Gears" +
                    "&return=x";
}
</script>

<!-- YUI -->
<link rel="stylesheet" href="yui/fonts/fonts.css" /> 
<link rel="stylesheet" href="yui/button/assets/skins/sam/button.css" />
<link rel="stylesheet" href="yui/container/assets/skins/sam/container.css" />
<link rel="stylesheet" href="yui/calendar/assets/skins/sam/calendar.css" />
<script src="yui/yahoo-dom-event/yahoo-dom-event.js"></script>
<script src="yui/element/element.js"></script> 
<script src="yui/button/button.js"></script>
<script src="yui/container/container.js"></script>
<script src="yui/dragdrop/dragdrop.js"></script>
<script src="yui/calendar/calendar.js"></script> 

<link rel="stylesheet" href="jquery-ui.css" />
<script src="jquery.js"></script>
<script src="Window.js"></script>
<script src="TimeNGears.js"></script>
<script>
$(document).ready(function() {
    var tg = new TimeNGears;
    tg.load();
});
</script>
<style>
h1 {
    margin-bottom: 0px;
}
h2 {
    margin-top: 0px;
}
th {
    text-align: right;
}
th, td {
    margin: 0;
    padding: 2;
}
span.date {
    font-size: smaller;
}
tr {
    margin: 0;
}
table {
    margin: 0;
}
td.inputCell {
    cursor: pointer;
    height: 2em; /* should sit with a different class */
}
td.inputCell input {
    display: none;
}
td.timeCell {
    width: 80px;
    text-align: right;
}
td.totalCell, th.totalLabel {
    background-color: #ddd;
}
td.tracCell, td.jobCell, td.timeCell, th.dateCell {
    border-left: 1px solid #eee;
    border-bottom: 1px solid #eee;
}
td.totalCell {
    border: none;
}
tr.template td.tracCell, tr.template td.jobCell, tr.template td.timeCell {
    border-bottom: none;
}
td.timeCell input {
    width: 50px;
    text-align: right;
}
td.tracCell, td.tracCell input {
    width: 50px;
}
td.jobCell, td.jobCell input {
    width: 150px;
}
/* change the calendar border and padding to integrate into the parent dialog */
.yui-calcontainer {
    border: none !important;
    padding: 0px !important;
}
/* centre the contents of dialogs */
.bd {
    padding: 20px !important;
}
</style>
</head>
<body>

<div id="notification" style="position: absolute; top: 0px; left: 50%; margin-left: -50px; height: 20px; width: 100px; background: yellow; border: 1px solid black; font-size: 9pt; text-align: center; display: none;">Timesheet saved</div>

<div class="yui-skin-sam"><div id="dialogContainer"></div></div>

<div style="position: relative; border: 1px solid green; height: 80px;">
 <h1 style="position: absolute; top: 10px; left: 80px; margin: 0px;">Time-N-Gears 0.1 Beta</h1>
 <h2 style="position: absolute; top: 45px; left: 80px;" id="timesheet_name_header"><span class="value" id="timesheet_name" style="cursor: pointer;">Untitled</span><input style="display: none;" type="text" /> <span id="unsaved" style="display: inline;">*</span></h2>
 <img style="position: absolute; top: 10px; left: 10px;" src="time-n-gears.png" />
</div>
<div style="margin-top: 5px; border: 1px solid purple;">
 <button id="new">New</button> <button id="open">Open</button> <button id="save" disabled="disabled">Save</button> <button id="discard">Discard</button>
</div>
<div style="margin-top: 5px; border: 1px solid orange;">
 <button id="addWeek">Add week</button>
</div>
<div style="margin-top: 5px; border: 1px solid pink;">
 <button id="scrollDown">Scroll Down</button> <button id="scrollUp">Scroll Up</button>
</div>

<!-- autocomplete should be turned off to prevent ff from populating this on refresh -->
<input type="hidden" name="timesheet_id" id="timesheet_id" autocomplete="off" />
<div id="timesheet" style="min-height: 500px; width: 1000px; margin-top: 5px; border: 2px solid grey; position: relative; overflow: hidden; overflow: visible;">
</div>
<div class="week" id="weekTemplate" style="width: 927px; position: absolute; display: none;">
<table style="border: 2px solid #ddd; margin-bottom: 50px;" cellspacing="0">
 <tr>
  <td class="dateRangeCell" valign="bottom" colspan="3" style="font-size: smaller;">&nbsp;</td>
  <th class="dateCell"><span class="monday date"></span><br />Monday</th>
  <th class="dateCell"><span class="tuesday date"></span><br />Tuesday</th>
  <th class="dateCell"><span class="wednesday date"></span><br />Wednesday</th>
  <th class="dateCell"><span class="thursday date"></span><br />Thursday</th>
  <th class="dateCell"><span class="friday date"></span><br />Friday</th>
  <th class="dateCell"><span class="saturday date"></span><br />Saturday</th>
  <th class="dateCell"><span class="sunday date"></span><br />Sunday</th>
  <th class="totalLabel">Total</th>
 </tr>
 <tr>
  <th class="totalLabel" width="30">&nbsp;</th>
  <th class="jobCell totalLabel" colspan="2">Total</th>
  <td class="topTotal totalCell timeCell monday">&nbsp;</td>
  <td class="topTotal totalCell timeCell tuesday">&nbsp;</td>
  <td class="topTotal totalCell timeCell wednesday">&nbsp;</td>
  <td class="topTotal totalCell timeCell thursday">&nbsp;</td>
  <td class="topTotal totalCell timeCell friday">&nbsp;</td>
  <td class="topTotal totalCell timeCell saturday">&nbsp;</td>
  <td class="topTotal totalCell timeCell sunday">&nbsp;</td>
  <td class="grandTotal totalCell timeCell">&nbsp;</td>
 </tr>
 <tr class="template" dirty="0">
  <td><input class="delete" type="submit" value="-" style="display: none;" /></td>
  <td class="inputCell tracCell"><div><span class="value">&nbsp;</span><input type="text" /></div></td>
  <td class="inputCell jobCell"><div><span class="value">&nbsp;</span><input type="text" /></div></td>
  <td class="inputCell timeCell monday"><div><span class="value">&nbsp;</span><input type="text" /></div></td>
  <td class="inputCell timeCell tuesday"><div><span class="value">&nbsp;</span><input type="text" /></div></td>
  <td class="inputCell timeCell wednesday"><div><span class="value">&nbsp;</span><input type="text" /></div></td>
  <td class="inputCell timeCell thursday"><div><span class="value">&nbsp;</span><input type="text" /></div></td>
  <td class="inputCell timeCell friday"><div><span class="value">&nbsp;</span><input type="text" /></div></td>
  <td class="inputCell timeCell saturday"><div><span class="value">&nbsp;</span><input type="text" /></div></td>
  <td class="inputCell timeCell sunday"><div><span class="value">&nbsp;</span><input type="text" /></div></td>
  <td class="totalCell timeCell"><div><span class="value">&nbsp;</span></div></td>
 </tr>
</table>
</div>
</body>
</html>
